<template>
  <el-dialog v-if='visibleDialog' :visible='visibleDialog' title='校验'>
    <el-form inline :model='formModel' :rules='rules' ref='form'>
      <el-form-item label='日期' prop='date'>
        <el-date-picker format='yyyy-MM-dd' value-format="yyyy-MM-dd" v-model='formModel.date'></el-date-picker>
      </el-form-item>
      <el-form-item label='仓库面积' prop='houseArea'>
        <el-input v-model='formModel.houseArea'></el-input>
      </el-form-item>
      <el-form-item label='车间面积' prop='workHouseArea'>
        <el-input v-model='formModel.workHouseArea'></el-input>
      </el-form-item>

    </el-form>

    <div slot='footer' style="text-align: center;">
      <el-button type='primary' @click='submit'>确定</el-button>
      <el-button @click='cancel'>取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'DialogCheck',
  props: {
    value: {
      type: Boolean,
      require: true
    }
  },
  data () {
    return {
      rules: {
        date: [
          { required: true, message: '日期不能为空', trigger: ['change', 'blur'] }
        ],
        houseArea: [
          { required: true, message: '面积不能为空', trigger: ['change', 'blur'] }
        ],
        workHouseArea: [
          { required: true, message: '面积不能为空', trigger: ['change', 'blur'] }
        ]
      },
      formModel: {
        date: '',
        houseArea: '',
        workHouseArea: ''
      }
    }
  },
  computed: {
    visibleDialog: {
      set (val) {
        this.$emit('update:value', val)
      },
      get () {
        return this.value
      },
    }
  },
  methods: {
    submit () {
      this.$refs['form'].validate((valid) => {

        if (!valid) return

        this.$message.success('提交成功')
        this.visibleDialog = false
      })
    },
    cancel () {
      this.visibleDialog = false
    }
  }
}
</script>
